import React, { useCallback, useState, useMemo } from "react"

const Count = React.memo(function Count(props) {
  const { changeCount } = props
  console.log("子组件重新渲染")
  return <button onClick={changeCount}>子组件的加1</button>
})

export default function Demo1() {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("message")

  // const cachedMessage = useMemo(() => message, [message]);

  const changeCount = useCallback(() => {
    setCount((prevCount) => prevCount + 1)
  }, [])

  return (
    <div>
      <h4>useRef性能优化：</h4>
      <div>count: {count}</div>
      <button onClick={changeCount}>加1</button>
      <Count changeCount={changeCount} />
      <div>
        <span>message: {message}</span>
        <button onClick={() => setMessage(Math.random() + "")}>改文案</button>
      </div>
    </div>
  )
}
